import React from 'react';
import {Table,Typography} from 'dw-mx';
import {SettingOutlined} from 'dw-mx-icons';
const { Text } = Typography;
const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
    },
    {
        title: 'Borrow',
        dataIndex: 'borrow',
    },
    {
        title: 'Repayment',
        dataIndex: 'repayment',
    },
];
const data = [
    {
        key: '1',
        name: 'John Brown',
        borrow: 10,
        repayment: 33,
    },
    {
        key: '2',
        name: 'Jim Green',
        borrow: 123,
        repayment: 0,
    },
    {
        key: '3',
        name: 'Joe Black',
        borrow: 10,
        repayment: 10,
    },
    {
        key: '4',
        name: 'Jim Red',
        borrow: 75,
        repayment: 45,
    },
    {
        key: '5',
        name: 'Jim Red',
        borrow: 75,
        repayment: 45,
    },
    {
        key: '6',
        name: 'Jim Red',
        borrow: 75,
        repayment: 45,
    },{
        key: '7',
        name: 'Jim Red',
        borrow: 75,
        repayment: 45,
    },{
        key: '8',
        name: 'Jim Red',
        borrow: 75,
        repayment: 45,
    },
];
export default function TableSum(){
    return (
        <Table columns={columns} dataSource={data} pagination={{pageSize:5}}
               summary={() => {
                   let totalBorrow = 0;
                   let totalRepayment = 0;
                   data.forEach((value)=>{
                       if(value){
                           totalBorrow += value['borrow'];
                           totalRepayment += value['repayment']
                       }
                   });
                   return (
                       <>
                           <Table.Summary.Row>
                               <Table.Summary.Cell>Total</Table.Summary.Cell>
                               <Table.Summary.Cell>
                                   <Text type="danger">{totalBorrow}</Text>
                               </Table.Summary.Cell>
                               <Table.Summary.Cell>
                                   <Text>{totalRepayment}</Text>
                               </Table.Summary.Cell>
                           </Table.Summary.Row>
                       </>
                   );
               }}
        />
    )
}